<template>
  <div>
    <top-data></top-data>
    <div class="return-father" v-if="commodity">
      <div class="return w" @click="gundong">
        <router-link tag="p" to="/homeView">首页 >&nbsp;</router-link>
        <p>{{ commodity.detailsName }}</p>
      </div>
    </div>
    <div class="commodity w">
      <div class="commodity-lbt" v-if="commodity">
        <!-- 视频 -->
        <div class="lbt-shipin" v-show="commodityFlag">
          <video width="435" height="435" autoplay loop controls ref="video">
            <source :src="commodity.video" type="video/mp4" />
          </video>
        </div>

        <!-- 图片 -->
        <div class="lbt-img" v-show="!commodityFlag">
          <img :src="commodity.picUrl[0]" width="100%" alt="" ref="imgs" />
        </div>

        <!-- 选择卡 -->
        <div class="select-card">
          <span class="iconfont icon-jiantouzuo-copy" @click="toLeft"></span>
          <div class="card">
            <ul ref="uls">
              <!-- 视频选项 -->
              <li v-if="commodity.video">
                <div
                  :class="['card-img', { con: zhangshiindex == -1 }]"
                  @mouseenter="bofq"
                >
                  <img :src="commodity.picUrl[0]" width="100%" alt="" />
                </div>
              </li>

              <!-- 图片选项 -->
              <li v-for="(item, index) in commodity.picUrl" :key="index">
                <div
                  :class="['card-img', { con: zhangshiindex == index }]"
                  @mouseenter="zhangshi(item, index)"
                >
                  <img :src="item" width="100%" alt="" />
                </div>
              </li>
            </ul>
          </div>
          <span class="iconfont icon-jiantouyou" @click="toRight"></span>
        </div>
      </div>

      <div class="commodity-details" v-if="commodity">
        <div class="details-title">
          <div class="name-title">
            <p>{{ commodity.detailsName }}</p>
            <p>{{ commodity.text }}</p>
          </div>
          <div class="satisfied">
            <p>{{ commodity.satisfied }}</p>
            <p>满意度></p>
          </div>
        </div>
        <div class="shoppingOptions">
          <div class="price">
            <span>￥</span>
            <p>{{ commodity.presentPrice }}.00</p>
            <span>￥{{ commodity.originalPrice }}</span>
          </div>
          <p class="jinbi">
            金币最高可抵<span>{{ commodity.presentPrice - 0.1 }}</span
            >元，购买可得金币
          </p>
          <div class="promotion">
            <div class="promotion-title">促销</div>
            <div class="promotion-text">{{ commodity.activity }}</div>
          </div>
          <div class="address">
            <div class="address-title">送至</div>
            <div class="address-box">
              <p>广东省广州市从化区</p>
              <p>预计11月7日发货</p>
            </div>
          </div>
          <div class="business">
            <div class="business-title">经营者</div>
            <div class="business-name">{{ commodity.business }}</div>
          </div>
        </div>
        <div class="color-cors">
          <div class="color-titel">选择颜色</div>
          <div class="color-option">
            <ul>
              <li
                :class="{ con: colors == item }"
                @click="xuanze(item)"
                v-for="(item, index) in commodity.colors"
                :key="index"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
        <div class="quantity">
          <div class="quantity-title">选择数量</div>
          <div class="quantity-num">
            <div
              class="reduce"
              :style="nums > 1 ? { color: 'black' } : { color: '#cdcdcd' }"
              @click="reduce"
            >
              -
            </div>
            <input type="text" :value="nums" />
            <div class="add" @click="add">+</div>
          </div>
        </div>
        <button class="gwc" @click="joingwc">加入购物车</button>
        <button class="miaosha" @click="lijigoumai">立即秒杀</button>
      </div>
    </div>

    <div class="introduce-two" v-show="intFlag">
      <div class="two-son">
        <div class="son-l" v-if="commodity">
          {{ commodity.detailsName }}
        </div>
        <div class="son-r">
          <div class="son-tab">
            <div
              :class="['tow-tab', { con: qiehuanText == '商品介绍' }]"
              @click="qiehuang('商品介绍')"
            >
              商品介绍
            </div>
            <div
              :class="['tow-tab', { con: qiehuanText == '规格参数' }]"
              @click="qiehuang('规格参数')"
            >
              规格参数
            </div>
            <div
              :class="['tow-tab', { con: qiehuanText == '售后政策' }]"
              @click="qiehuang('售后政策')"
            >
              售后政策
            </div>
            <div
              :class="['tow-tab', { con: qiehuanText == '商品评价' }]"
              @click="qiehuang('商品评价')"
            >
              商品评价
            </div>
          </div>
          <div class="son-btn">
            <button @click="joingwc">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce w" v-if="commodity">
      <div class="introduce-son">
        <div
          :class="['introduce-tab', { con: qiehuanText == '商品介绍' }]"
          @click="qiehuang('商品介绍')"
        >
          商品介绍
        </div>
        <div
          :class="['introduce-tab', { con: qiehuanText == '规格参数' }]"
          @click="qiehuang('规格参数')"
        >
          规格参数
        </div>
        <div
          :class="['introduce-tab', { con: qiehuanText == '售后政策' }]"
          @click="qiehuang('售后政策')"
        >
          售后政策
        </div>
        <div
          :class="['introduce-tab', { con: qiehuanText == '商品评价' }]"
          @click="qiehuang('商品评价')"
        >
          商品评价
        </div>
      </div>
      <div class="tables-details">
        <!-- 商品介绍 -->
        <div class="product-introduction" v-show="qiehuanText == '商品介绍'">
          <img
            :src="item"
            alt=""
            v-for="(item, index) in commodity.productIntroduction"
            :key="index"
          />
        </div>

        <!-- 规格参数 -->
        <div class="Specifications" v-show="qiehuanText == '规格参数'">
          <h2>参数配置</h2>
          <img :src="commodity.Specifications" width="100%" alt="" />
        </div>

        <!-- 售后政策 -->
        <div class="afterSalesPolicy" v-show="qiehuanText == '售后政策'">
          <img :src="commodity.afterSales" width="100%" alt="" />
        </div>

        <!-- 商品评论 -->
        <div class="productReview" v-show="qiehuanText == '商品评价'">
          <div class="productReview-son">
            <div class="count">
              <div class="cumulative">
                <span>累计评论</span>
                <span>{{ commodity.commentNum }}</span>
              </div>
              <div class="satisfaction">
                <span>满意度</span>
                <span>{{ commodity.satisfied }}</span>
              </div>
            </div>
            <div class="sort">
              <select>
                <option value="推荐排序">推荐排序</option>
                <option value="时间排序">时间排序</option>
              </select>
            </div>
          </div>

          <div class="pinlun">
            <ul>
              <li v-for="(item, index) in commodity.comment" :key="index">
                <div class="pinlun-user">
                  <div class="userImg">
                    <img :src="item.userImg" alt="" />
                  </div>
                  <div class="userInformation">
                    <p>{{ item.username }}</p>
                    <p>{{ item.times }}</p>
                  </div>
                </div>
                <div class="pinlun-son">
                  <div class="pinlun-text">
                    {{ item.content }}
                  </div>
                  <div class="pinlun-img">
                    <div
                      class="picture"
                      v-for="(k, i) in item.buyerShow"
                      :key="i"
                    >
                      <img :src="k" alt="" />
                    </div>
                  </div>
                </div>
                <div
                  class="business-reply"
                  v-show="item.reply"
                  v-for="(k, i) in item.reply"
                  :key="i"
                >
                  <div class="businessInformation">
                    <div class="businessImg">
                      <img :src="k.replyImg" alt="" />
                    </div>
                    <div class="businessName">{{ k.replyUser }}</div>
                  </div>
                  <div class="reply-text">{{ k.replyContent }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <foot-data></foot-data>
  </div>
</template>

<script>
import topData from "../components/topData.vue";
import footData from "../components/footData.vue";
export default {
  data() {
    return {
      qiehuanText: "商品介绍",
      toId: null,
      commodity: null,
      colors: null,
      nums: 1,
      zhangshiindex: 0,
      scrollTop: null,
      intFlag: false,
      imgNum: 0,
      commodityFlag: true,
      shopCartLists: [],
      dindanList: [],
    };
  },
  methods: {
    // table栏
    qiehuang(value) {
      this.qiehuanText = value;
    },

    // 选择颜色
    xuanze(color) {
      if (color == this.colors) {
        this.colors = null;
      } else {
        this.colors = color;
      }
    },

    // 商品数量
    reduce() {
      if (this.nums > 1) {
        this.nums -= 1;
      }
    },
    add() {
      this.nums += 1;
    },

    // 滚动窗口触发
    gundong(event) {
      this.scrollTop =
        event.target.documentElement.scrollTop || event.target.body.scrollTop;
      if (this.scrollTop >= 900) {
        this.intFlag = true;
      } else {
        this.intFlag = false;
      }
    },

    // 视频播放
    bofq() {
      this.zhangshiindex = -1;
      this.commodityFlag = true;
      this.$refs.video.play();
    },
    // 选项卡
    zhangshi(imgSrc, index) {
      this.zhangshiindex = index;
      this.$refs.imgs.src = imgSrc;
      this.$refs.video.pause();
      this.commodityFlag = false;
    },

    // 选项卡向右滚动
    toRight() {
      if (this.imgNum < this.commodity.picUrl.length - 4) {
        this.imgNum++;
        this.$refs.uls.style.marginLeft = -this.imgNum * 90 + "px";
      }
    },
    // 选项卡向左滚动
    toLeft() {
      if (this.imgNum > 0) {
        this.imgNum--;
        this.$refs.uls.style.marginLeft = -this.imgNum * 90 + "px";
      }
    },

    // 加入购物车
    joingwc() {
      if (this.colors != null) {
        let index = this.shopCartLists.findIndex(
          (item) => item.id == this.commodity.id
        );
        if (index == -1) {
          if (this.colors != null) {
            this.shopCartLists.unshift({
              id: this.commodity.id,
              name: this.commodity.detailsName,
              imageUrl: this.commodity.imageUrl,
              text: this.commodity.text,
              color: this.colors,
              nums: this.nums,
              originalPrice: this.commodity.originalPrice,
              presentPrice: this.commodity.presentPrice,
              activity: this.commodity.activity,
              //货物状态
              state: "购物车",
              check: true,
            });
          }
        } else {
          this.shopCartLists[index].nums += this.nums;
        }

        window.localStorage.setItem(
          "shopCartLists",
          JSON.stringify(this.shopCartLists)
        );

        this.$message({
          message: "成功加入购物车",
          type: "success",
        });
      } else {
        this.$message({
          message: "请选择喜欢的款式",
          type: "warning",
        });
      }
    },

    lijigoumai() {
      // originalPrice
      console.log(this.dindanList);
      var danghao = "487";
      for (var i = 0; i <= 7; i++) {
        danghao += Math.floor(Math.random() * 10);
      }

      var date =
        new Date().getFullYear() +
        "年" +
        new Date().getMonth() +
        "月" +
        new Date().getDate() +
        "日 " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes();

      let danhao = {
        shoujianr: "",
        times: date,
        danghao: danghao,
        state: "待支付",
        totalPrice: this.commodity.originalPrice,
      };

      this.dindanList.unshift({
        id: +new Date(),
        dindantou: danhao,
        dindannei: [
          {
            activity: this.commodity.activity,
            check: true,
            color: this.colors,
            id: this.commodity.id,
            imageUrl: this.commodity.imageUrl,
            name: this.commodity.detailsName,
            nums: this.nums,
            originalPrice: this.commodity.originalPrice,
            presentPrice: this.commodity.presentPrice,
            text: this.commodity.text,
          },
        ],
      });

      window.localStorage.setItem(
        "dindanList",
        JSON.stringify(this.dindanList)
      );
      
      this.$router.push("/paymentView");
    },

    commodityLists() {
      this.$http({
        url: "./json/commodity.json",
        methods: "get",
      }).then((data) => {
        this.commodity = data.data.commodityList.filter((item) => {
          return item.id == this.toId;
        })[0];

        if (this.commodity.video != "") {
          this.zhangshiindex = -1;
          this.commodityFlag = true;
        } else {
          this.commodityFlag = false;
          this.zhangshiindex = 0;
        }
      });
    },
  },
  mounted() {
    window.addEventListener("scroll", this.gundong);
  },
  created() {
    if (localStorage.shopCartLists) {
      this.shopCartLists = JSON.parse(
        window.localStorage.getItem("shopCartLists")
      );
    }

    this.toId = this.$route.query.id;

    this.commodityLists();

    if (localStorage.dindanList) {
      this.dindanList = JSON.parse(window.localStorage.getItem("dindanList"));
    }
  },
  components: { topData, footData },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/details.scss";
</style>